<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>有奖答题平台</title>
	<!-- ICON -->
	<link href="/frame/images/meatball.ico" type="image/ico" rel="shortcut icon">
	<!-- CSS -->
	<link rel="stylesheet" href="/lib/layuiadmin/layui/css/layui.css" media="all" />
	<link rel="stylesheet" href="/lib/layuiadmin/css/admin.css" media="all">
	<style>
		.ztree * {padding:0; margin:0; /*font-family: Verdana, Arial, Helvetica, AppleGothic, sans-serif*/}
		.ztree {margin:0; padding:5px; color:#333;}
		.ztree li a {padding:1px 3px 0 0; margin:0; cursor:pointer; height:17px; color:#333; background-color: transparent;
			text-decoration:none; vertical-align:top; display: inline-block;font-size: 16px}
	</style>
</head>
<body>
<form class="layui-form layui-form-pane">
<div class="layui-fluid">
	<div class="layui-card">
		<div class="layui-card-body">
			<div class="layui-row" >
				<div class="layui-col-md3" >
					<!--<div class="layui-col-md3" >-->

					<!--</div>-->
					<div class="layui-row">
						<div class="layui-col-md12">
							<div class="layui-row">
								<div class="layui-col-md11">
									组织架构
								</div>
								<div class="layui-col-md1">
									<button lay-submit lay-filter="addBtn" style="border: 0px">
										<i class="layui-icon"></i>
									</button>
								</div>
							</div>
						</div>
						<div class="layui-col-md12">
							<div class="meatball-tree-div_dept">
								<ul id="deptMenuTree" class="ztree"></ul>
							</div>
						</div>
					</div>

				</div>
				<div class="layui-col-md9">
					<div class="layui-row">
						<div class="layui-col-md12">
							<div class="layui-card" >
								<div class="layui-card-header" style="line-height: 40px;height: 40px">
										<div class="layui-row">
											<div class="layui-col-md10">
												<span id="deptid">&nbsp;</span>
											</div>
											<div class="layui-col-md2">
												<div class="layui-btn-group">
													<button class="layui-btn layui-btn-primary layui-btn-sm" lay-submit lay-filter="editBtn">
														编辑
													</button>
													<button class="layui-btn layui-btn-primary layui-btn-sm" lay-submit lay-filter="delBtn">
														删除
													</button>
												</div>
											</div>
										</div>
								</div>
								<div class="layui-card-body" style="line-height: 40px;height: 40px">
									<span id="deptmemo"></span>
								</div>
							</div>
						</div>
					</div>
					<div class="layui-row">
						<div class="layui-col-md12">
							<!--<form class="layui-form" id="queryForm" style="float: right;">-->
								<!--<input type="hidden" name="id" id="id" value="">-->
							<!--</form>-->
							<table id="table" lay-filter="table"></table>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
</form>
<form>
	<input type="hidden" name="pid_h" id="pid_h" value="">
	<input type="hidden" name="pidname_h" id="pidname_h" value="">
	<input type="hidden" name="istop_h" value="">
</form>
<!-- 新增 -->
<script type="text/html" id="addForm">
	<form class="layui-form layui-form-pane">
		<input type="hidden" name="pid" id="pid">
		<input type="hidden" name="tenantid" id="tenantid">
		<div class="layui-card">
			<div class="layui-card-body">
				<div class="layui-form-item">
					<label class="layui-form-label">名称</label>
					<div class="layui-input-block">
						<input type="text" name="name" autocomplete="off" placeholder="请输入部门名称" class="layui-input" lay-verify="required">
					</div>
				</div>
				<div class="layui-form-item">
					    <label class="layui-form-label">顶级部门</label>
					    <div class="layui-input-block">
							<div class="layui-inline">2222
								<input type="checkbox" name="istop1111" lay-skin="switch" lay-text="是|否" checked>
							</div>
					    </div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">备注</label>
					<div class="layui-input-block">
						<textarea name="memo" placeholder="请输入备注" class="layui-textarea"></textarea>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">上级部门</label>
					<div class="layui-input-block">
						<div class="meatball-tree-div">
							<ul id="deptMenuTreeSel" class="ztree"></ul>
						</div>
					</div>
				</div>
				<div class="layui-hide">
					<input name="roleView" value="0">
					<button class="layui-btn submit" lay-submit="" lay-filter="add">新增</button>
					<button class="layui-btn reset" type="reset">重置</button>
				</div>
			</div>
		</div>
	</form>
</script>
<!-- 编辑 -->
<script type="text/html" id="editForm">
	<form class="layui-form layui-form-pane">
		<input type="hidden" name="id" value="{{d.id}}">
		<input type="hidden" name="pid" id="pid" value="{{d.pid}}">
		<input type="hidden" name="tenantid" id="tenantid" value="{{d.tenantid}}">
		<div class="layui-card">
			<div class="layui-card-body">
				<div class="layui-form-item">
					<label class="layui-form-label">名称</label>
					<div class="layui-input-block">
						<input type="text" name="name" value="{{d.name}}" autocomplete="off" placeholder="请输入部门名称" class="layui-input" lay-verify="required">
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-inline">
						<label class="layui-form-label">是否展开</label>
						<div class="layui-input-block">
							<input type="checkbox" name="istop" lay-skin="switch" lay-text="是|否">
						</div>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">备注</label>
					<div class="layui-input-block">
						<textarea name="memo" placeholder="请输入备注" class="layui-textarea"></textarea>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">上级部门</label>
					<div class="layui-input-block">
						<div class="meatball-tree-div">
							<ul id="deptMenuTreeSel" class="ztree"></ul>
						</div>
					</div>
				</div>
				<div class="layui-hide">
					<input name="roleView" value="0">
					<button class="layui-btn submit" lay-submit="" lay-filter="update">新增</button>
					<button class="layui-btn reset" type="reset">重置</button>
				</div>
			</div>
		</div>
	</form>
</script>
<!-- JavaScript -->
<script type="text/javascript" src="/lib/layuiadmin/layui/layui.js"></script>
<script type="text/javascript" src="/frame/js/DateUtil.js"></script>
<!--<script type="text/javascript" src="/lib/ztree/js/jquery.ztree.all.min.js"></script>-->
<!-- javascirpt -->
<script th:inline="javascript">  
	var deptMenuTree = [[${deptMenuTree}]];
</script>
<script type="text/javascript" th:inline="none">
layui.config({
	base: '/lib/layuiadmin/' //静态资源所在路径
}).extend({
	index: 'lib/index', //主入口模块
}).use(['index', 'ztree', 'ztreecheck'], function() {
	var table = layui.table,
		form = layui.form,
		element = layui.element,
		laytpl = layui.laytpl,
        $ = layui.jquery,
        $addBtn = $('#addBtn'),
		ztree = layui.ztree;
        //监听工具条

    var setting = {
        async: {
            enable: true,
            type: "get",
            url: "/system/org/treelist"
        },
        check: {
            enable: false
            // chkStyle: "radio",
            // radioType: "all"
        },
        data: {
            simpleData: {
                enable: true
            }
        },
        view: {
            remoteIcon: false,
            showIcon: true,
            nameIsHTML: true
        },
        callback: {
            // onCheck: zTreeOnCheck
            onClick: zTreeOnClick,
            beforeAsync:function(){

			},
            onAsyncSuccess: function () {
                var treeObj = $.fn.zTree.getZTreeObj("deptMenuTree");
                var nodes = treeObj.getNodes();
                for (var i = 0; i < nodes.length; i++) { //设置节点展开
                    treeObj.expandNode(nodes[i], true, false, true);
                    if(i<1){
                        // alert(nodes[i].id+nodes[i].name+nodes[i].memo);
                        var node = treeObj.getNodeByParam("id",nodes[i].id);
                        treeObj.selectNode(node);
                        setValue(nodes[i]);
                    }
                }
            }
        }
    };

    function setValue(obj) {
        $("#pid_h").val(obj.id);
        $("#deptid").html(obj.name+"（"+obj.id+"）");
        $('input[name=istop_h]').val(obj.istop)
        $("#deptmemo").html("<span style='color: red;font-size: 15px'>"+obj.memo+"</span>");
    }
	// 渲染下拉树
	function zTreeOnClick(event, treeId, treeNode) {
        setValue(treeNode);
        renderTable(treeNode.id);
    }
    function zTreeOnClickEdit(event, treeId, treeNode) {
        $("#pid").val(treeNode.id);
        $("#tenantid").val(treeNode.tenantid);
    }
	// function zTreeOnCheck(event, treeId, treeNode) {
	// 	var treeObj = $.fn.zTree.getZTreeObj("deptMenuTree");
	// }
	// 渲染下拉树
	function renderTree() {
        ztree.init($("#deptMenuTree"), setting);
        var treeObj = $.fn.zTree.getZTreeObj("deptMenuTree");
        var nodes = treeObj.getNodes();
        for (var i = 0; i < nodes.length; i++) { //设置节点展开
            treeObj.expandNode(nodes[i], true, true, true);
        }
	}
    function renderTreeEdit() {
        var settingEdit = {
            async: {
                enable: true,
                type: "get",
                url: "/system/org/treelist/"+ $("#pid_h").val()
            },
            check: {
                enable: true,
                chkStyle: "radio",
                radioType: "all"
            },
            data: {
                simpleData: {
                    enable: true
                }
            },
            view: {
                remoteIcon: false,
                showIcon: false,
                nameIsHTML: true
            },
            callback: {
                // onCheck: zTreeOnCheck
                onCheck: zTreeOnClickEdit
            }
        };
        ztree.init($("#deptMenuTreeSel"), settingEdit);
        var treeObj = $.fn.zTree.getZTreeObj("deptMenuTreeSel");
        var nodes = treeObj.getNodes();
        for (var i = 0; i < nodes.length; i++) { //设置节点展开
            treeObj.expandNode(nodes[i], true, false, true);
        }

    }
    // // 监听状态改变
    // form.on('switch(spread)', function(obj) {
    //     operate('PUT', {'id': this.id, 'spread': obj.elem.checked}, false);
    // });
    // 新增
    form.on('submit(addBtn)', function(data) {
        popupWin($(this).attr('title'), addForm.innerHTML);
        renderTreeEdit();
        return false;
    });
    // 编辑
    form.on('submit(editBtn)', function(data) {
        if($("#pid_h").val()==''){
            layer.alert('请先选择部门！', {icon: 5});
            return false;
        }
        // if($('input[name=istop_h]').val()){
        //     layer.alert('顶级部门，不能修改！', {icon: 5});
        //     return false;
        // }
        $.get('/system/org/' + $("#pid_h").val(), function(res) {
            if(res.status == 403) {
                layer.msg(res.message, {icon: 4});
            } else {
                laytpl(editForm.innerHTML).render(res, function(html) {
                    popupWin($(this).text(), html, true);
                });
                renderTreeEdit();
                renderTable('0');
            }
        })
        return false;
    });
    // 新增提交
    form.on('submit(add)', function(data) {
        if($("#pid").val()==''){
            layer.alert('请选择上级单位！', {icon: 5});
            return false;
		}
        operate('POST', data.field, true);
        return false;
    })
    // 更新
    form.on('submit(update)', function(data) {
        if($("#pid").val()==''){
            layer.alert('请选择上级单位！', {icon: 5});
            return false;
        }
        if($("#pid").val()==$('form input[name=id]').val()){
            layer.alert('部门不能同级！', {icon: 5});
            return false;
		}
        // var $form = $(this).parents('form');
        operate('PUT', data.field, true);
        return false;
    })
    form.on('submit(delBtn)', function(data) {
        if($("#pid_h").val()==''){
            layer.alert('请先选择部门！', {icon: 5});
            return false;
        }
        // if($('input[name=istop_h]').val()){
        //     layer.alert('顶级部门，不能删除！', {icon: 5});
        //     return false;
        // }
        layer.confirm('真的删除行么', {icon: 3}, function() {
            operate('DELETE', data.field, true);
        });
        return false;
    })
    $(function(){
        renderTree();
        renderTable('0');
    });
	function renderTable(id) {
        // 绘制表格
		// alert('/system/user/list/'+id);
        table.render({
// 		id: 'table',
            elem: '#table',
            url: '/system/user/table',
            page: true, // 开始分页
            // cellMinWidth: 80, // 定义全局最小宽度
            request: {
                pageName: 'offset'
            },
            response: {
                statusCode: 10000
                // countName: 'total', //数据总数的字段名称，默认：count
                // dataName: 'list' //数据列表的字段名称，默认：data
            },
            cols: [[
                {type: 'checkbox', fixed: 'left'},
                {type: 'numbers', title: '序号'},
                {field:'account', title: '账号', sort: true},
                {field:'name', title: '姓名'},
                // {field:'deptid', title: '部门',templet: function(d){
                //         $.ajaxSettings.async = false;
                //
                //         var deptText='';
                //         if(d.deptid!=null){
                //             $.get('/system/org/' + d.deptid, function(res) {
                //                 deptText=res.name;
                //             });
                //         }
                //         return deptText
                //     }},
                {field:'sexName', title: '性别'},
                {field:'email', title: '邮件'},
                {field:'phone', title: '电话'},
                {field:'createtimeText', title: '创建时间'},
                {field:'status', title: '状态', align:'center', templet: function(d){
                        return  d.status == 1 ? '启用' : '冻结';
					}}
            ]]
        });
    }

    //渲染弹框
    function popupWin(title, content) {
        layerIndex = layer.open({
            type: 1, //Page层类型
            area: '700px', //['700px', '480'],
            maxWidth: 1000,
            maxHeight: 700,
            title: title,
            shade: 0.1, //遮罩透明度
            skin: 'layui-layer-rim', //加上边框
            maxmin: false, //允许全屏最小化
            anim: 0, //0-6的动画形式，-1不开启
            scrollbar: false, //禁用滚动
            content: content,
            btn: ['<i class="layui-icon layui-icon-ok"></i> 提交', '<i class="layui-icon layui-icon-refresh-1"></i> 重置'],
            btn1: function(index, layero) {
                layero.find('form .submit').trigger('click');
                return false;
            },
            btn2: function(index, layero) {
                layero.find('form .reset').trigger('click');
                return false;
            }
        });
    }
    function operate(ajaxType, data, refresh, delRow) {
	    // alert($("#pid_h").val());
        var url = '/system/org/';
        if(ajaxType == 'DELETE') {
            url = '/system/org/del/' + $("#pid_h").val();
        }
        $.ajax({
            url: url,
            type: ajaxType,
            async: true,
            data: data,
            success: function(res) {
                if(res.code == 10000) {
                    if(refresh) {
                        renderTree();
                    }
                    if(ajaxType != 'DELETE') {
                        layer.close(layerIndex);
                    }
                    layer.msg(res.message, {icon: 1});
                } else if(res.code == 10003) {
                    layer.msg(res.message, {icon: 4});
                } else {
                    layer.msg(res.message, {icon: 5});
                }
            }
        })
    }
});
</script>
</body>
</html>